<template>
  <div class="projectDetails phoneRecordSheet">
    <div class="app-container details">
      <el-row :gutter="24">
        <el-col :span="6" class="details-left box-card">
          <el-card>
            <!-- 系统介绍 -->
            <div class="details-left-top details-left-box">
              <div class="top text-center">
                <svg-icon
                  :icon-class="'svg_xmgl'"
                  class="block w-80px h-80px m-auto mb-15px"
                />
                <label
                  v-if="isDetail && customerOptions.length == 0"
                  style="font-size: 20px"
                  >{{ phoneRecordInfos.customerName }}</label
                >
                <el-select
                  v-else
                  v-model="selectCustomeID"
                  :popper-class="'callCenterInfos-form-select'"
                  class="details-left-select"
                  clearable
                  placeholder="请选择客户名称"
                  style="width: 100%"
                  @change="selectCustomeIDChange"
                >
                  <el-option
                    v-for="item in customerOptions"
                    :key="item.id"
                    :label="item.customerName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
                <div class="w-80% m-auto pt-10px telCallsSTY">
                  <el-input
                    v-model="telCalls"
                    :disabled="routeParams.tel ? true : false"
                    clearable
                    maxlength="11"
                    placeholder="请输入来电电话，回车搜索"
                    @keyup.enter.native="telCallsFn"
                  ></el-input>
                </div>
              </div>
            </div>
            <div
              v-if="
                phoneRecordInfos.promptMessage ||
                phoneRecordInfos.expirationDate
              "
              class="details-left-box"
            >
              <div
                :class="
                  phoneRecordInfos.promptMessage ? 'text-#f00' : 'text-#009688'
                "
                class="pt-10px text-center"
                style="font-size: var(--callcenter-font-size)"
              >
                <div v-if="phoneRecordInfos.promptMessage" class="mb-10px">
                  {{ phoneRecordInfos.promptMessage || '' }}
                </div>
                <div v-if="phoneRecordInfos.expirationDate">
                  有效期至：{{ phoneRecordInfos.expirationDate || '' }}
                </div>
                <div class="mt-10px">{{ taxNatureName || '' }}</div>
              </div>
            </div>

            <div class="details-left-box text-14px">
              <el-row :gutter="24" class="mt-10px text-center">
                <el-col :span="8" class="border-r-2 border-fuchsia-600">
                  <p
                    class="text-#000 font-bold"
                    style="font-size: var(--callcenter-font-size)"
                  >
                    {{ phoneRecordInfos.todayDispatchNum || '0' }}
                  </p>
                  <p
                    class="mt-15px text-#333"
                    style="font-size: var(--callcenter-font-size)"
                  >
                    当天派单次数
                  </p>
                </el-col>
                <el-col :span="8" class="border-r-2 border-fuchsia-600">
                  <p
                    class="text-#000 font-bold"
                    style="font-size: var(--callcenter-font-size)"
                  >
                    {{ phoneRecordInfos.todayCallNum || '0' }}
                  </p>
                  <p
                    class="mt-15px text-#333"
                    style="font-size: var(--callcenter-font-size)"
                  >
                    当天来电次数
                  </p>
                </el-col>
                <el-col :span="8">
                  <p
                    class="text-#000 font-bold"
                    style="font-size: var(--callcenter-font-size)"
                  >
                    {{ phoneRecordInfos.monthCallNum || '0' }}
                  </p>
                  <p
                    class="mt-15px text-#333"
                    style="font-size: var(--callcenter-font-size)"
                  >
                    当月来电次数
                  </p>
                </el-col>
              </el-row>
            </div>
            <div class="details-left-box">
              <div class="title" style="font-size: 20px">所属信息</div>
              <ul class="cnt status-box">
                <li>
                  <el-icon><Notebook /></el-icon>
                  <label style="font-size: var(--callcenter-font-size)"
                    >所属公司</label
                  >
                  <p
                    style="font-size: var(--callcenter-font-size); color: #333"
                  >
                    {{ phoneRecordInfos.orgName || '' }}
                  </p>
                </li>
              </ul>
            </div>
          </el-card>
        </el-col>
        <el-col :span="18" class="box-card" style="min-height: 800px">
          <!-- 项目详情 -->
          <el-card class="details-right" style="min-height: 100%">
            <el-tabs
              v-model="activeName"
              :before-leave="beforeLeave"
              class="details-right-tabs"
            >
              <template v-for="(item, index) in tabsList" :key="index">
                <el-tab-pane
                  v-if="item.show"
                  :label="item.label"
                  :name="item.name"
                >
                </el-tab-pane>
              </template>
              <div>
                <keep-alive>
                  <component
                    :is="components[activeName]"
                    ref="tabName"
                    :routeParams="routeParams"
                    :telCalls="telCalls"
                    v-bind="componentData"
                    @childParam="getCildParamFn"
                  />
                </keep-alive>
              </div>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script name="PhoneRecordSheet" setup>
import { useRouter, useRoute } from 'vue-router'
import { reactive, ref, toRefs } from 'vue'
import PRSinformation from '@/views/callCenter/telephoneRecords/phoneRecordSheet/modules/PRSinformation.vue'
import PRStextMessage from '@/views/callCenter/telephoneRecords/phoneRecordSheet/modules/PRStextMessage.vue'
import PRSorderList from '@/views/callCenter/telephoneRecords/phoneRecordSheet/modules/PRSorderList.vue'
import PRSdevicelist from '@/views/callCenter/telephoneRecords/phoneRecordSheet/modules/PRSdevicelist.vue'
import PRSinvoiceList from '@/views/callCenter/telephoneRecords/phoneRecordSheet/modules/PRSinvoiceList.vue'
import PRSworkRrecord from '@/views/callCenter/telephoneRecords/phoneRecordSheet/modules/PRSworkRrecord.vue'
import PRScallHistory from '@/views/callCenter/telephoneRecords/phoneRecordSheet/modules/PRScallHistory.vue'
import PRSoffSiteOrder from '@/views/callCenter/telephoneRecords/phoneRecordSheet/modules/PRSoffSiteOrder.vue'
const router = useRouter()
const route = useRoute()
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()
const { proxy, type } = getCurrentInstance()
import { abnormalDeatils, listByCustomerFromView } from '@/api/callCenter'
/******************hock 事件*******/
import { useTransaction } from '@/hooks/dict/phoneRecord'
const { getDetailByCustomerFn, routeParams } = useTransaction()

/*****************************动态组件**/
const activeName = ref('PRSinformation')
const components = shallowRef({
  PRSinformation,
  PRStextMessage,
  PRSorderList,
  PRSdevicelist,
  PRSinvoiceList,
  PRSworkRrecord,
  PRScallHistory,
  PRSoffSiteOrder
})
const data = reactive({
  loading: false,
  phoneRecordInfos: {}, //电话记录单详情
  selectCustomeID: '', //选中的客户
  customerOptions: [], //左边客户列表
  formData: {},
  //分标签列表
  tabsListALL: [],
  tabsList: [
    {
      label: '企业信息',
      name: 'PRSinformation',
      show: true,
      data: {
        paramData: computed(() => {
          return detailsType.value == 'abnormalDetails'
            ? {
                customerId: abnormalID.value,
                isPopUP: isPopUP.value,
                type: detailsType.value
              }
            : selectCustomeID.value &&
              containsChinese(selectCustomeID.value) == false
            ? {
                customerId: selectCustomeID.value,
                isPopUP: isPopUP.value,
                type: detailsType.value
              }
            : {}
        })
      }
    },
    {
      label: '短信',
      name: 'PRStextMessage',
      show: true,
      data: {
        paramData: computed(() => {
          return {
            customerId: phoneRecordInfos.value.customerId,
            orgId: phoneRecordInfos.value?.orgId, //客户来源
            customerTaxcode: phoneRecordInfos.value?.customerTaxcode, //客户税号
            customerName: phoneRecordInfos.value?.customerName, //客户名称,
            // telephone: phoneRecordInfos.value?.telephone, //客户电话
            expirationDate: phoneRecordInfos.value?.expirationDate,
            isDetail: isDetail.value,
            telVal: telCalls.value //电话号码 左边的电话号码
          }
        })
      }
    },
    {
      label: '订单',
      name: 'PRSorderList',
      show: true,
      data: {
        paramData: computed(() => {
          return {
            customerId: phoneRecordInfos.value.customerId,
            orgId: phoneRecordInfos.value?.orgId,
            customerName: phoneRecordInfos.value?.customerName, //客户名称,
            customerTaxcode: phoneRecordInfos.value?.customerTaxcode,
            isDetail: isDetail.value
          }
        })
      }
    },
    {
      label: '设备',
      name: 'PRSdevicelist',
      show: true,
      data: {
        paramData: computed(() => {
          return {
            customerId: phoneRecordInfos.value.customerId,
            orgId: phoneRecordInfos.value?.orgId,
            customerTaxcode: phoneRecordInfos.value?.customerTaxcode,
            isDetail: isDetail.value
          }
        })
      }
    },
    {
      label: '会员费发票',
      name: 'PRSinvoiceList',
      show: true,
      data: {
        paramData: computed(() => {
          return {
            customerId: phoneRecordInfos.value.customerId,
            orgId: phoneRecordInfos.value?.orgId,
            customerTaxcode: phoneRecordInfos.value?.customerTaxcode,
            isDetail: isDetail.value
          }
        })
      }
    },
    {
      label: '工单记录',
      name: 'PRSworkRrecord',
      show: true,
      data: {
        paramData: computed(() => {
          return {
            customerId: phoneRecordInfos.value.customerId,
            orgId: phoneRecordInfos.value?.orgId,
            customerTaxcode: phoneRecordInfos.value?.customerTaxcode,
            isDetail: isDetail.value
          }
        })
      }
    },
    {
      label: '来电记录',
      name: 'PRScallHistory',
      show: true,
      data: {
        paramData: computed(() => {
          return {
            customerId: phoneRecordInfos.value.customerId,
            orgId: phoneRecordInfos.value?.orgId,
            customerTaxcode: phoneRecordInfos.value?.customerTaxcode,
            isDetail: isDetail.value
          }
        })
      }
    },
    {
      label: '非现场单据',
      name: 'PRSoffSiteOrder',
      show: true,
      data: {
        paramData: computed(() => {
          return {
            customerId: phoneRecordInfos.value.customerId,
            orgId: phoneRecordInfos.value?.orgId,
            customerTaxcode: phoneRecordInfos.value?.customerTaxcode,
            isDetail: isDetail.value
          }
        })
      }
    }
  ],
  componentData: []
})
let {
  loading,
  phoneRecordInfos,
  selectCustomeID,
  customerOptions,
  formData,
  tabsListALL,
  tabsList,
  componentData
} = toRefs(data)
onMounted(() => {
  componentData.value = computed(() => {
    let val = tabsList.value.filter(e => {
      return e.name == activeName.value
    })
    // console.log('val[0].data==>', val[0].data)
    return val[0].data
  })
})
//导航栏切换菜单-信息
const changeTabsMenu = () => {
  var p = new Promise((resolve, reject) => {
    if (!selectCustomeID.value || selectCustomeID.value == 'null') {
      reject()
      proxy.$alert('请选择客户名称', '提示', {
        confirmButtonText: '确定',
        callback: action => {}
      })
    } else {
      resolve(void 0)
    }
  })
  return p
}
// 导航栏切换菜单
const beforeLeave = async () => {
  return await changeTabsMenu()
}
/**********左边 客户名称 选择*********/
const selectCustomeIDChange = val => {
  getDetailByCustomerFn(val, Dres => {
    phoneRecordInfos.value = Dres
    setTis()
  })
}
//是否含有中文件
const containsChinese = str => {
  return /[\u4e00-\u9fff]/.test(str)
}
async function initFn(type) {
  let params = {
    pageNum: 1,
    pageSize: 9999
  }
  if (type == 'taxCode') {
    //弹出来-通过税号 查询
    params.customerNameOrNumber = routeParams.value.TAX_CODE
  } else {
    //弹出来-通过手机号 查询
    params.mainContactPhone = telCalls.value
  }
  let cRes = await listByCustomerFromView(params)

  if (cRes.code == 200 && cRes.rows.length == 0) {
    proxy.$alert('未查询到客户信息', '提示', {
      confirmButtonText: '确定',
      callback: action => {}
    })
  }
  customerOptions.value = cRes.code == 200 ? cRes.rows : []
  phoneRecordInfos.value =
    cRes.code == 200 && cRes.rows.length > 0 ? cRes.rows[0] : {}
  selectCustomeID.value = phoneRecordInfos.value.id || ''
  detailsType.value = 'pop-up'
  taxNatureName.value = phoneRecordInfos.value?.taxNatureName
}
//纳税人性质 名称
const taxNatureName = ref('')
//子传值给父
const getCildParamFn = row => {
  console.log('父接受子传值：', row)
  switch (row.childParamTypes) {
    case 'phoneRecordInfos':
      // 每次获取客户信息数据
      phoneRecordInfos.value = row
      taxNatureName.value = row.taxNatureName
      telCalls.value = routeParams.value.tel
        ? routeParams.value.tel
        : row.personTel
        ? row.personTel
        : telCalls.value
      selectCustomeID.value = row.isCustomerName
        ? row.customerName
        : row?.customerId
      setTis()
      break
    case 'detail':
      //工单列表跳转过来
      phoneRecordInfos.value = row
      console.log(
        containsChinese(row.customerName),
        'row.customerName-----------------------------------------------'
      )
      taxNatureName.value = row.taxNatureName
      telCalls.value = routeParams.value.tel
        ? routeParams.value.tel
        : row.personTel
      setTis()
      selectCustomeID.value = row.customerName

      break
    case 'taxNature':
      //纳税人性质 改变的时候 传递过来
      taxNatureName.value = row.taxNatureName
      break
    default:
      break
  }
}
//提示信息
const setTis = () => {
  if (sessionStorage.getItem('isShowTis')) {
    return false
  }
  if (phoneRecordInfos.value.promptMessage) {
    sessionStorage.setItem('isShowTis', true)
    let html =
      '<p style="color:#f00; font-size: 18px">' +
      phoneRecordInfos.value.promptMessage +
      '</p>'

    proxy.$alert(html, '提示', {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '确定',
      callback: action => {}
    })
  }
}
/************来电电话*************/
const telCalls = ref('')
const telCallsFn = val => {
  console.log('来电电话请求：', val, telCalls.value)
  const reg = /^[^\u4e00-\u9fa5]+$/
  if (!reg.test(telCalls.value)) {
    proxy.$modal.msgWarning('请输入正确的号码')
    return false
  }
  initFn()
}
/********************异常单据 模块******************/
const abnormalID = ref('') //异常单据id
/*********监听路由*****/
const isDetail = ref(false)
const detailsType = ref('')
const isPopUP = ref('') //是否弹出框跳转过来
watch(
  () => route.query,
  val => {
    if (route.query.PERSON_TEL) {
      // 通过手机号码 进入页面 弹出框
      routeParams.value = route.query || {}
      routeParams.value.tel = route.query.PERSON_TEL.split('*')[0]
      telCalls.value = routeParams.value.tel
      sessionStorage.removeItem('isShowTis')
      document.title = routeParams.value.tel
      initFn('tel')
      isPopUP.value = 'PERSON_TEL'
      return
    }
    if (route.query.TAX_CODE) {
      // 通过客户税号 进入页面 弹出框
      routeParams.value = route.query || {}
      sessionStorage.removeItem('isShowTis')
      document.title = route.query.TAX_CODE
      initFn('taxCode')
      isPopUP.value = 'TAX_CODE'
      return
    }
    isPopUP.value = 'system'
    if (route.query.abId && route.name == type.name) {
      //从工单列表跳转过来的
      abnormalID.value = route.query.abId
      detailsType.value = 'abnormalDetails'
      isDetail.value = route.query.type == 'detail' ? true : false
      return
    }

    if (route.query.id && route.name == type.name) {
      //从工单列表跳转过来的
      selectCustomeID.value = route.query.id
      detailsType.value = 'details'
      isDetail.value = route.query.type == 'detail' ? true : false
      sessionStorage.removeItem('isShowTis')
    }
  },
  {
    immediate: true
  }
)
</script>

<style lang="scss" scoped>
@import '@/assets/styles/detailsStyle.scss';
.phoneRecordSheet {
  .details-left-select {
    ::v-deep .el-input__wrapper {
      border: none !important;
      box-shadow: none !important;
    }
    ::v-deep .el-input__inner {
      font-size: var(--callcenter-font-size);
      color: #000;
      font-weight: 600;
      text-align: center;
    }
  }
  ::v-deep .telCallsSTY .el-input__inner {
    font-size: var(--callcenter-font-size);
    text-align: center;
    line-height: 40px;
    height: 40px;
  }
  // 细节修改 字体颜色
  ::v-deep .details-right-tabs .el-tabs__item {
    font-size: var(--callcenter-font-size) !important;
  }
  ::v-deep .titleContent .collapse-title {
    font-size: var(--callcenter-font-size) !important;
  }

  ::v-deep .el-table .el-table__header-wrapper th .cell,
  ::v-deep .el-table .el-table__fixed-header-wrapper th .cell,
  ::v-deep .el-table .el-table__body-wrapper th .cell,
  ::v-deep .el-table .el-table__body-wrapper td .cell {
    font-size: var(--callcenter-font-size) !important;
  }
}
</style>
